<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width*, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
              width: 60%;
              margin-left: 20%;
              font-family: sans-serif;
                background-image: url("/images/background-img/leaves.png");
        }

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 285px;
  text-align: center;
  line-height: 2.3;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
}

#appointment{
    border-width: 1px;
    border-color: pink;
    border-style: solid;
    color: pink;
}

#pay_fees{
    border-width: 1px;
    border-color:orange;
    border-style: solid;
    color: orange;
}
#personal_center{
    border-width: 1px;
    border-color:green;
    border-style: solid;
    color:green ;
}
li:last-child a {
  margin-right: 0;
}

a:hover {
  background-color: darkgray;
}

a:active {
  background: gray;
  color: white;
}
h1,h2{
    width: 100%;
}

img{

    width: 100%;
    border-radius: 5px;

}
table{
    width: 100%;
}

.outpatient{
    color:black;
    background-color:lightskyblue;
    margin-top: 25px;
}

    </style>
</head>
<body>
    <h1><img src="./images/img/home-logo.png " alt="" style="max-width: fit-content"></h1>
  <ul>
    <li><a href="appointment_Outpatient.jsp" id="appointment">门诊<br>预约</a></li>
    <li><a href="payTheFees.html" id="pay_fees">在线<br>缴费</a></li>
    <li><a href="CustomerMangerServlet?action=list" id="personal_center">个人<br>中心</a></li>
  </ul>
  <h2><img src="./images/img/severce.png" alt="" height="45px"></h2>

  <table>

    <tr>
        <td><a class="outpatient" href="" >查找<br>医生</a></td>
        <td><a class="outpatient" href="" >出诊<br>信息</a></td>
        <td><a class="outpatient" href="" >检查<br>预约</a></td>
    </tr>


    <tr>
        <td><a class="outpatient" href="">取药<br>预约</a></td>
        <td><a class="outpatient" href="">排队<br>查询</a></td>
        <td><a class="outpatient" href="">我的<br>预约</a></td>
    </tr>
  </table>
  
</body>
</html>